<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖和节流</title>
    <style>
        .container{
            width: 100%;
            height: 500px;
            position: relative;
        }
        .container .list {
            width: 100px;
            height: 100%;
            border: 1px solid #999;
        }
        .container .list .item{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-top: 10px;
            border-radius: 1px;
            color: #FFF;
            background-color: cornflowerblue;
            cursor: pointer;
        }
        .container .drawer{
            width:0px;
            height: 100%;
            background-color: brown;
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
            transition: width 1s linear,opacity 1s linear;
        }
        .open-draw .drawer{
            display: block;
            width: 300px;
            opacity: 1;
        }
    </style>
    <script src="./js/debounce.js"></script>
    <script src="./js/throttle.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        /**
         * 缺点：函数执行频率太高了。
         */
        function showTop() {
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
            console.log("滚动位置："+scrollTop)
        }
        //1：非防抖
        // window.onscroll = showTop
        //2 防抖
        //window.onscroll = debounce(showTop,1000)
        // document.getElementById("doc").onmouseenter = debounce(showTop,1000);
        //3 节流
        // window.onscroll = throttle(showTop,1000)
        /**
         *
         * @param ev
         */
        function showDrawer(ev) {
            ev = ev || event
            var target = ev.currentTarget || ev.srcElement
            var parent = target.parentElement.parentElement
            var sibiling  = target.parentElement.nextElementSibling
            target.setAttribute("data-begin",new Date().toString())
            parent.classList.add("open-draw")
        }

        /**
         *
         * @param ev
         */
        function closeDrawer(ev) {
            ev = ev || event
            var target = ev.currentTarget || ev.srcElement
            var parent = target.parentElement.parentElement
            var sibiling = target.parentElement.nextElementSibling
            parent.classList.remove("open-draw")
        }
        $(".list").on('mousemove','.item',throttle(showDrawer,1000))
    </script>
</head>
<body>
   <!--<div class="container" id="doc" style="width:500px;min-height: 1800px;background-color: brown" onmouseenter="debounce(showTop,1000)"></div>-->
   <div class="container">
       <div class="list">
           <div class="item" onmouseleave="closeDrawer(event)">1</div>
           <div class="item" onmouseleave="closeDrawer(event)">2</div>
           <div class="item" onmouseleave="closeDrawer(event)">3</div>
           <div class="item" onmouseleave="closeDrawer(event)">4</div>
           <div class="item" onmouseleave="closeDrawer(event)">5</div>
           <div class="item" onmouseleave="closeDrawer(event)">6</div>
       </div>
       <div class="drawer"></div>
   </div>
</body>
</html>